<template>
  <el-card class="mt-20">
    <div id="container" />
  </el-card>
</template>

<script lang="ts">
export default {
  name: "BMap",
};
</script>

<script lang="ts" setup>
import { onMounted } from "vue";
// function loadScript() {
//   var script = document.createElement("script");
//   script.src = "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥&callback=initialize";
// }
// 🐷提供的一种异步加载的方法
onMounted(() => {
  const script = document.createElement("script");
  script.src =
    "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=y5hMuLCUQQwiwMTfP9Di9WdbkyAxhl7o&callback=initBMap";
  // 百度地图js一旦加载成功，会调用回调函数initBMap（必须是全局作用域下的函数才能找到并调用）
  document.body.append(script);
});
// 必须是全局作用域下的函数才能找到并调用
window.initBMap = () => {
  // 创建地图实例
  var map = new BMapGL.Map("container");
  // 设置中心点坐标
  var point = new BMapGL.Point(114, 22.5);
  // 设置地图展示级别
  map.centerAndZoom(point, 12);
  // 开启鼠标滚轮缩放
  map.enableScrollWheelZoom(true);
  // 🐷设置地图类型
  // map.setMapType(BMAP_NORMAL_MAP); // 标准地图模式
  // 🐷添加地图控件
  var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
  map.addControl(scaleCtrl);
  var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
  map.addControl(zoomCtrl);
  var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
  map.addControl(cityCtrl);
};
</script>

<style scoped>
#container {
  height: 600px;
}
</style>
